<template>
    <a-row class="wl_containers">
        <a-col class="wl_container-chart" :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card title="实时监控情况" style="text-align: left;width: 100%;" bodyStyle="padding: 10px">
                <China />
            </a-card>
        </a-col>
        <a-col class="wl_container-chart" :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card title="情况预测" style="text-align: left;width: 100%;" bodyStyle="padding: 10px;">
                <Thrend />
            </a-card>
            <a-card title="人员效率" style="text-align: left;margin-top: 15px;width: 100%;" bodyStyle="padding: 10px;">
                <Effic />
            </a-card>
        </a-col>
    </a-row>
    <a-row class="wl_containers">
        <a-col class="wl_container-chart" :xl="12" :lg="24" :sm="24" :xs="24">
            <a-card title="各类占比" style="text-align: left;" bodyStyle="padding: 10px;display: flex;flex-wrap: wrap;">
                <Ration value="20" id="radio1" color="#58D9F9" />
                <Ration value="33" id="radio2" color="#f9b137" />
                <Ration value="62" id="radio3" color="#42c568" />
            </a-card>
        </a-col>
        <a-col class="wl_container-chart" :xl="6" :lg="12" :sm="24" :xs="24">
            <a-card title="热门事件" style="text-align: left;width: 100%;" bodyStyle="padding: 10px;">
                <Keywords />
            </a-card>
        </a-col>
        <a-col class="wl_container-chart" :xl="6" :lg="12" :sm="24" :xs="24">
            <a-card title="工作进度" style="text-align: left;width: 100%;" bodyStyle="padding: 10px;">
                <Progress />
            </a-card>
        </a-col>
    </a-row>
</template>

<script setup lang="ts">
    import China from "@/components/Chart/chart-map";
    import Thrend from "@/components/Chart/chart-trend";
    import Effic from "@/components/Chart/chart-effic";
    import Ration from "@/components/Chart/chart-ratio";
    import Keywords from "@/components/Chart/chart-keys";
    import Progress from "@/components/Chart/chart-rate"
</script>

<style scoped>
    .wl_containers {
        margin-left: -20px;
        margin-right: -12px;
    }
    .wl_container-chart {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 24px;
    }
</style>